<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MBA 淘书季 | 山东大学</title>
    <style>
        ul,li{list-style: none;}
        em, i {
            text-decoration: none;
            font-style: normal;
        }
        .list-block li {
            height: 120px;
            position: relative;
        }
       .list-block li  a {
            display: -webkit-box;
            display: box;
            height: 100%;
            padding-top: 10px;
            font-size:0;
        }
        .page-index .am-header .am-header-search-container {
            margin: 0 10px;
            font-size: 2rem;
            font-weight: 400;
            text-align: center;
            display: block;
            word-wrap: normal;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            line-height: 42px;
        }

        .page-index .am-header-search-container input {
            border:0;
        }

        .pro-img {
            position: relative;
            height: 100px;
            width: 100px;
            margin-left: 10px;
            overflow: hidden;
            text-align: center;
        }

        .pro-img img {
            display: inline-block;
            width: auto;
            max-width: 100px;
            height: 100px;
        }

        .product-info-box {
            -webkit-box-flex: 1;
            box-flex: 1;
            margin-left: 10px;
            position: relative;
            height: 100%;
            margin-top: -2px;
            padding-right: 10px;
        }
        .book-name{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .product-book-name{
            color: #232326;
            font-size: 15px;
            line-height: 22px;
            height: 40px;
        }
        .book-author{
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
            color: #848689;
            margin-top:0;
        }
        .gray-icon{
            height: 25px;
            margin:0;
            overflow: hidden;
            line-height: 25px;
        }
        .product-price-m{
            font-size:0;
            height: 20px;
            overflow: hidden;
            width: 100%;
            line-height: 20px;
            margin-right: 10px;
        }
        .product-price-m em{
            font-size: 16px;
            color: #f23030;
            margin-right: 3px;
            display: block;
            height: 20px;
            overflow: hidden;
            float: left;
        }
        .big-price {
            font-size: 20px;
        }
        .little-icon {
            display: block;
            padding: 0 2px 0 2px;
            background-color: #f23030;
            border-radius: 2px;
            color: white;
            font-size: 11px;
            margin-right: 5px;
            margin-left: 0;
            float: left;
            height: 13px;
            line-height: 13px;
            overflow: hidden;
            position: relative;
            margin-top: 4px;
            margin-bottom: 3px;
        }
        .gray-pro-info {
            color: #848689;
            font-size: 12px;
            display: -webkit-box;
            display: box;
            margin-top: 4px;
            overflow: hidden;
            height: 15px;
            line-height: 16px;
            -webkit-box-align: center;
            box-align: center;
        }
        .product-info-box:after {
            content: '';
            height: 1px;
            width: 200%;
            position: absolute;
            left: 0;
            top: auto;
            right: auto;
            bottom: -4px;
            background-color: #e3e5e9;
            border: 0px solid transparent;
            border-radius: 0px;
            -webkit-border-radius: 0px;
            transform: scale(0.5);
            -webkit-transform: scale(0.5);
            transform-origin: top left;
            -webkit-transform-origin: top left;
        }
        .list-block ul{ padding-left:0;}
    </style>
</head>
<body class="page-index">
<header class="am-header am-header-default">
    <div class="am-header-left am-header-nav">
        <a href="#left-link" class="">
            <i class="am-header-icon am-icon-home"></i>
        </a>
    </div>

    <h1 class="am-header-search-container">
        <input type="email" class="" id="doc-ipt-email-1" placeholder="输入电子邮件">
    </h1>

    <div class="am-header-right am-header-nav">
        <a href="#cart-link" class="am-btn am-btn-secondary">
            <i class="am-header-icon am-icon-shopping-cart"></i>
        </a>
    </div>
</header>

<div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider='{}' >
    <ul class="am-slides">
        <li>
            <img src="http://s.amazeui.org/media/i/demos/bing-1.jpg">

        </li>
        <li>
            <img src="http://s.amazeui.org/media/i/demos/bing-2.jpg">

        </li>
        <li>
            <img src="http://s.amazeui.org/media/i/demos/bing-3.jpg">

        </li>
        <li>
            <img src="http://s.amazeui.org/media/i/demos/bing-4.jpg">

        </li>
    </ul>
</div>
<div class="list-block">
    <ul >

        {for start="1" end="100"}

        <li><a href="{:url('index/details')}">
            <div class="pro-img">
                <img alt="算法导论（原书第3版）/计算机科学丛书" style="opacity: 1; transition: opacity 0.5s ease-in;"
                     src="https://m.360buyimg.com/mobilecms/s357x357_g9/M03/10/0C/rBEHalDFX10IAAAAAAMtdd_bKwEAADM6gOC6NoAAy2N265.jpg!q50.jpg">
            </div>
            <div class="product-info-box">
                <div class="product-book-name">
                    <div class="book-name"><span>算法导论（原书第3版）/计算机科学丛书</span></div>
                    <span class="book-author">[美]Thomas H.Cormen，[美]Charles E.Leiserson，[美]Ronald L.Rivest，[美]Clifford Stein</span>
                </div>
                <div class="gray-icon"></div>
                <div class="product-price-m"><em>¥<span class="big-price">102</span><span class="small-price">.40</span></em><span
                        class="little-icon">券</span></div>
                <div class="gray-pro-info"><span class="self-sell">自营</span> <span>46970条评价</span>
                    <span>好评97%</span> <span class="book-shop-name">机械工业出版社</span></div>
            </div>

        </a></li>

        {/for}


    </ul>
</div>
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script>
</body>
</html>
